<template>
 <div>
   <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24" v-if="!this.addshow">
            <!-- <a-form-model-item label="网点编码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="meshPointsCode">
              <a-input v-model="model.meshPointsCode" placeholder="请输入网点编码"  ></a-input>
            </a-form-model-item> -->
          </a-col>
          <a-col :span="24" v-else>
            <a-form-model-item label="网点编码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="meshPointsCode">
              {{model.meshPointsCode}}
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="运营区域" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sysOrgCode">
              <!-- <a-select v-model="model.sysOrgCode" placeholder="请选择运营区域">
                <a-select-option v-for="(item, index)  in orgCodeDict" :key="item.key" :value="item.value"> {{item.label}}</a-select-option>
              </a-select> -->
              <a-tree-select
                v-model="model.sysOrgCode"
                :tree-data="deptTreeDict"
                @change="handleTreeChange"
                :show-checked-strategy="SHOW_PARENT"
                search-placeholder="请选择运营区域"
              />
              <!-- <j-select-depart v-model="model.regionId" :multi="false" :backDepart="true" :treeOpera="true">></j-select-depart> -->
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="网点分类" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="storeCategory">
              <a-select v-model="model.storeCategory" placeholder="请选择网点分类">
                <a-select-option v-for="(item, index)  in storeCategoryDict" :key="item.key" :value="item.value"> {{item.label}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="网点名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="meshPointsName">
              <a-input v-model="model.meshPointsName" placeholder="请输入网点名称"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="网点负责人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="personChargeId">
              <j-select-user-by-dep store="id" v-model="model.personChargeId" ></j-select-user-by-dep>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="客服电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone">
              <a-input v-model="model.phone" placeholder="请输入客服电话" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="网点状态：" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="addshow" prop="meshPointsType">
              <a-select   v-model="model.meshPointsType" placeholder="请选择网点状态">
                <a-select-option v-for="(item, index)  in meshPointsTypedata" :key="index.toString()" :value="item.id"> {{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="邮政编码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="zipCode">
              <a-input v-model="model.zipCode" placeholder="请输入邮政编码"  ></a-input>
            </a-form-model-item>
          </a-col>
          
          <!-- <a-col :span="24">
            <a-form-model-item label="客服姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="callCenterMan">
              <a-input v-model="model.callCenterMan" placeholder="请输入客服姓名"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="客户电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="telephone">
              <a-input v-model="model.telephone" placeholder="请输入客户电话"  ></a-input>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="24">
            <a-form-model-item label="网点图片" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pic">
              <!-- <a-input v-model="model.pic" placeholder="请输入网点图片##分割"  ></a-input> -->
              <j-image-upload :fileSizeLimit="500" text="上传网点图片" v-model="model.pic" ></j-image-upload>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="24">
            <a-form-model-item label="地区" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="provinceName">
              <a-input v-model="provinceName" placeholder="请选择地址"  @click="visibleclick"></a-input>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="24">
            <a-form-model-item label="详细地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="detailedAddress" >
              <a-input v-model="model.detailedAddress" placeholder="请选择地址详细地址"  @click="visibleclick"></a-input>
            </a-form-model-item>
          </a-col>
          
          <!-- <a-col :span="24">
            <a-form-model-item label="省名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="provinceName">
              <j-area-linkage type="cascader" v-model="model.provinceName" placeholder="请输入省名称"  width="100%"></j-area-linkage>
            </a-form-model-item>
          </a-col> -->
          <!-- <a-col :span="24">
            <a-form-model-item label="市" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cityId">
              <a-input-number v-model="model.cityId" placeholder="请输入市" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="市名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cityName">
              <a-input v-model="model.cityName" placeholder="请输入市名称"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="区" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="areaId">
              <a-input-number v-model="model.areaId" placeholder="请输入区" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="区名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="areaName">
              <a-input v-model="model.areaName" placeholder="请输入区名称"  ></a-input>
            </a-form-model-item>
          </a-col> -->
          <!-- <a-col :span="24">
            <a-form-model-item label="位置" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="location">
              <a-input v-model="model.location" placeholder="请输入位置"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="经度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="longitude">
              <a-input v-model="model.longitude" placeholder="请输入经度"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="维度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="latitude">
              <a-input v-model="model.latitude" placeholder="请输入维度"  ></a-input>
            </a-form-model-item>
          </a-col> -->
          <!-- <a-col :span="24">
            <a-form-model-item label="是否删除（0：否、1：是）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isDelete">
              <a-input-number v-model="model.isDelete" placeholder="请输入是否删除（0：否、1：是）" style="width: 100%" />
            </a-form-model-item>
          </a-col> -->
        </a-row>
      </a-form-model>
      
    </j-form-container>
  </a-spin>
  <div  v-if="visibles">
       <tencent-map ref="map" @dblclick="datass" :visible="visibles"></tencent-map>
        
    </div>

 </div>
  
</template>

<script>
  import TencentMap from "@comp/map/TencentMap";
  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
  import { TreeSelect } from 'ant-design-vue';
  const SHOW_PARENT = TreeSelect.SHOW_PARENT;
  export default {
    name: 'RentalStoreForm',
    components: {
      TencentMap
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        provinceName:'',
        visibles:false,
        confirmLoading: false,
        validatorRules: {
            storeCategory:[{ required: true, message: '请输入网点分类!' }],
            meshPointsCode:[{ required: true, message: '请输入网点编码!' }],
            meshPointsName:[{ required: true, message: '网点名称!' }],
            personChargeId:[{ required: true, message: '请输入网点负责人id!' }],
            zipCode:[{ required: true, message: '请输入邮政编码!' }],
            // pic:[{ required: true, message: '请输入网点图片!' }],
            detailedAddress:[{ required: true, message: '请输入详细地址!',trigger: 'change' }],
            // provinceName:[{ required: true, message: '请输入省名称!' }],
            // attributionDeviceId:[{ required: true, message: '请输入归属柜子设备id!' }],
        },
        meshPointsTypedata:[
          {name:'启用',id:1},
          {name:'维护',id:2},
          {name:'删除',id:3},
        ],
        addshow:false,
        url: {
          add: "/rental/store/add",
          edit: "/rental/store/edit",
          queryById: "/rental/store/queryById",
          store_category: "/rental/store-category/options",
          queryTreeUrl: "/sys/sysDepart/queryIdTree",
        },
        storeCategoryDict:[],
        deptTreeDict:[],
        SHOW_PARENT,
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
      this.getStoreCategoryDict();
      this.getDeptTreeDict();
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      getStoreCategoryDict(){
        httpAction(this.url.store_category,{},'get').then((res)=>{
          this.storeCategoryDict=res.result;
        }).finally(() => {

        })
      },
      getDeptTreeDict(){
        getAction(this.url.queryTreeUrl,{}).then((res)=>{
          this.deptTreeDict=res.result;
          console.log("deptTreeDict:", this.deptTreeDict);
        }).finally(() => {

        })
      },
      handleTreeChange(value, label, extra){
        const data = extra.triggerNode.$options.propsData.dataRef;
        if(data.zipCode){
          this.model.zipCode = data.zipCode;
        }
      },
      visibleclick(){
        this.visibles=!this.visibles
      },
      datass(e){
         this.visibles = false
        //  this.provinceName=e.ad_info.province+e.ad_info.city+e.ad_info.district
         this.model.detailedAddress=e.address;
         console.log(555,this.model.detailedAddress)
         this.model.provinceName=e.ad_info.province;
         this.model.cityName=e.ad_info.city;
         this.model.areaName=e.ad_info.district;
         this.model.provinceId=e.ad_info.adcode.slice(0,1)+'0000';
         this.model.cityId=e.ad_info.adcode.slice(0,3)+'00';
         this.model.areaId=e.ad_info.adcode;

         debugger;
         this.model.latitude=e.location.lat.toString();
         this.model.longitude=e.location.lng.toString();

          //this.model.meshPointsType=1
        
          this.$forceUpdate() 
          // this.$refs.form.validate(valid => {})
      },
      add () {
        this.edit(this.modelDefault);
        this.addshow=false
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
        this.addshow=true
      },
      submitForm () {
        const that = this;
        // 触发表单验证

        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'post';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
    }
  }
</script>